<template>
  <div class="hotspot_container">
    <div class="hotspot_header">
      <span class="hotspot_header_main">
        <svg-icon icon-class="fire_fill"></svg-icon>热点指数
      </span>
      <span class="hotspot_header_tip">最近24小时热点指数变化</span>
    </div>
    <div class="hotspot_content">
      <div class="hotspot_item">
        <span class="hotspot_label">今日热点</span>
        <span class="hotspot_value">{{ trend.now }}</span>
      </div>
      <div class="hotspot_item">
        <span class="hotspot_label">昨日热点</span>
        <span class="hotspot_value">{{ trend.old }}</span>
      </div>
      <div class="hotspot_item">
        <span class="hotspot_label">同比变化</span>
        <span class="hotspot_value" :class="{
            'up': changeRate > 0,
            'down': changeRate < 0
          }">
          {{ changeRate }}%
        </span>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    trend: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    changeRate() {
      try {
        if (!this.trend || typeof this.trend.now !== 'number' || typeof this.trend.old !== 'number') {
          return 0
        }
        // Handle division by zero and invalid numbers
        if (this.trend.old === 0 || !Number.isFinite(this.trend.old)) {
          return this.trend.now === 0 ? 0 : 100
        }
        const rate = ((this.trend.now - this.trend.old) / this.trend.old) * 100
        // Handle invalid calculation results
        return Number.isFinite(rate) ? Number(rate.toFixed(2)) : 0
      } catch {
        return 0
      }
    }
  }
}
</script>

<style lang="scss" scoped>
@import '@/styles/mixin.scss';

.hotspot_container {
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  width: 100%;
  height: 100%;
  overflow: auto;
}

.hotspot_header {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 24px;
  padding: 8px 12px;
  background: #f5f7fa;
  border-radius: 8px;
  width: 100%;
  gap: 16px;

  .hotspot_header_main {
    color: #ff4a0e;
    font-weight: 500;
    font-size: 20px;

    .svg-icon {
      margin-right: 6px;
    }
  }

  .hotspot_header_tip {
    color: #737373;
    font-size: 14px;
  }
}

.hotspot_content {
  display: flex;
  justify-content: space-around;
  gap: 12px;
}

.hotspot_item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 8px;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.2s ease;

  &:hover {
    background-color: #f5f7fa;
  }
}

.hotspot_label {
  flex: 1;
  font-size: 14px;
  color: #606266;
}

.hotspot_value {
  font-size: 14px;
  color: #606266;

  &.up {
    color: #67c23a;
  }

  &.down {
    color: #ff0000;
  }
}
</style>
